<template>
  <div class="app-container">
    <div class="header" v-if="developerMode">
      <nav>
        <RouterLink v-if="!authStore.isLoggedIn" to="/login">登录</RouterLink>
        <RouterLink to="/articles">文章列表</RouterLink>
        <RouterLink v-if="authStore.isLoggedIn" to="/article/create">新增文章</RouterLink>
       <a v-if="authStore.isLoggedIn" href="#" @click.prevent="logout">退出登录</a>
      </nav>
      <nav>
        <RouterLink to="/">首页</RouterLink>
      </nav>
    </div>
    <div class="content">
      <router-view />
    </div>
  </div>
</template>

<script setup>
import { RouterLink, RouterView } from 'vue-router'
import { useAuthStore } from './stores/authStore'
import { useRouter } from 'vue-router'

const authStore = useAuthStore()
const router = useRouter()
//开发者模式开关
const developerMode = false

const logout = () => {
  authStore.logout()
  router.push('/login')
}
</script>

<style scoped>
.app-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.content {
  flex: 1;
  padding: 20px;
}

nav {
  margin-bottom: 20px;
}

nav a {
  margin-right: 15px;
  text-decoration: none;
  color: #007bff;
}

nav a:hover {
  text-decoration: underline;
}
</style>